import 'package:ecy_app_flutter/EcyRouter.dart';
import 'package:ecy_app_flutter/routes/blind_box/exchange_market/models/blind_box_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';


class CategoryImageSelector extends StatefulWidget {
  final List<BlindBoxDetailMore> commodityList;
  final Key? key;
  CategoryImageSelector({required this.commodityList, this.key}) : super(key: key);
  
  @override
  State<CategoryImageSelector> createState() => _CategoryImageSelectorState();
}

class _CategoryImageSelectorState extends State<CategoryImageSelector> {
  int selectedIndex = 0;
  List<String?> imageList = [];

  @override
  void initState() {
    super.initState();
    _updateImageList();
  }

  @override
  void didUpdateWidget(CategoryImageSelector oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.commodityList != widget.commodityList) {
      _updateImageList();
    }
  }

  void _updateImageList() {
    if (selectedIndex == 0) {
      imageList = widget.commodityList.map((e) => e.illustratedHandbookUrl).toList();
    } else {
      var rarity = selectedIndex == 1 ? "2" : selectedIndex == 2 ? "1" : "0";
      imageList = widget.commodityList.where((n) => n.rarity == rarity).map((e) => e.illustratedHandbookUrl).toList();
    }
  }

  final List<String> tabs = ["全部", "隐藏款", "稀有款", "普通款"];
  @override
  Widget build(BuildContext context) {
  return Card(
    elevation: 0,
    color: Colors.white,
    margin: EdgeInsets.all(10.w),
    child: Column(
      children: [
        // 顶部选项卡+图鉴
        Row(
          children: [
            // 左侧选项卡
            Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: List.generate(tabs.length, (index) {
                  return GestureDetector(
                    onTap: () {
                      setState(() {
                        selectedIndex = index;
                        _updateImageList();
                      });
                    },
                    child: Container(
                      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
                      decoration: BoxDecoration(
                        border: Border(
                          bottom: BorderSide(
                            color: selectedIndex == index ? Colors.transparent : Colors.transparent,
                            width: 2,
                          ),
                        ),
                      ),
                      child: Text(
                        tabs[index],
                        style: TextStyle(
                          color: selectedIndex == index ? Colors.black : Colors.grey,
                          fontWeight: selectedIndex == index ? FontWeight.bold : FontWeight.normal,
                        ),
                      ),
                    ),
                  );
                }),
              ),
            ),
            // 右侧"图鉴+箭头"整体
            GestureDetector(
              onTap: () {
              
                EcyRouter.push(context, EcyRouter.blindBoxPictorial, {});
              },
              child: const Padding(
                padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                child: Row(
                  children: [
                    Text("图鉴", style: TextStyle(fontWeight: FontWeight.bold)),
                    SizedBox(width: 4),
                    Icon(Icons.arrow_forward_ios, size: 12),
                  ],
                ),
              ),
            ),
          ],
        ),
        SizedBox(height: 12),
        // 下方图片
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: imageList.map((url) {
              return Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: ClipOval(
                  child: Image.network(
                    url ?? "",
                    width: 60,
                    height: 60,
                    fit: BoxFit.cover,
                  ),
                ),
              );
            }).toList(),
          ),
        ),
        SizedBox(height: 12),
      ],
    ),
  );
}
}